<!--
  ~ Copyright 2019 ABSA Group Limited
  ~
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~     http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->
<div *ngIf="dashboardState.filters.dateRange" class="filters mo-padding">
  <time-frame-picker [range]="dashboardState.filters.dateRange" [rangeBoundaries]="executionEvents.totalDateRange"
    (rangeChange)="onDateRangeSelected($event)">
  </time-frame-picker>
</div>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-12">
      <input type="text" class="search float-right" #searchInput placeholder="Search..."
        value="{{dashboardState.filters.searchQuery}}" (keyup)="onSearchTermChange($event)" />

      <div class="dataMode float-left">
        Filter by Date/Time &nbsp;
        <mat-slide-toggle [color]="'primary'" [checked]="dashboardState.filters.dateRange"
          (change)="onFilterByDateSwitchToggle($event)">
        </mat-slide-toggle>
      </div>
      <ngx-datatable #table class='table material expandable' [columnMode]="'force'" [headerHeight]="'auto'"
        [footerHeight]="'auto'" [rowHeight]="'auto'" [scrollbarV]="false" [selectionType]="'single'"
        [loadingIndicator]="loadingIndicator.isActive" [rows]="executionEvents.items"
        [count]="executionEvents.totalCount" [externalPaging]="true" [offset]="dashboardState.pagination.page - 1"
        [limit]="dashboardState.pagination.size" [externalSorting]="true" [sorts]="[sort]" (page)="onPageChange($event)"
        (sort)="onSortChange($event.sorts[0])" (select)="onSelect($event)">

        <ngx-datatable-column name="Framework" [width]="10">
          <ng-template let-expanded="frameworkName" let-row="row" ngx-datatable-cell-template>
            <td class="{{getFrameworkImg(row.frameworkName)}}"></td>
          </ng-template>
        </ngx-datatable-column>
        <ngx-datatable-column name="Application Name" prop="applicationName" [width]="50">
          <ng-template let-expanded="applicationName" let-row="row" ngx-datatable-cell-template>
            <div class="tooltipCell" title="{{row.applicationName}}">
              {{row.applicationName}}
            </div>
          </ng-template>
        </ngx-datatable-column>
        <ngx-datatable-column name="Application Id" prop="applicationId" [width]="50">
          <ng-template let-expanded="applicationId" let-row="row" ngx-datatable-cell-template>
            <div class="tooltipCell" title="{{row.applicationId}}">
              {{row.applicationId}}
            </div>
          </ng-template>
        </ngx-datatable-column>
        <ngx-datatable-column name="Execution Date" prop="timestamp" [width]="50">
          <ng-template let-expanded="timestamp" let-row="row" ngx-datatable-cell-template>
            <div class="tooltipCell" title=" {{row.timestamp | date:'yyyy-MM-dd, h:mm:ss a'}}" placement="bottom">
              {{row.timestamp | date:'yyyy-MM-dd, h:mm:ss a'}}
            </div>
          </ng-template>
        </ngx-datatable-column>
        <ngx-datatable-column name="Destination" prop="dataSourceUri" [width]="400">
          <ng-template let-expanded="dataSourceUri" let-row="row" ngx-datatable-cell-template>
            <div class="tooltipCell" title="{{row.dataSourceUri}}">
              {{row.dataSourceUri}}
            </div>
          </ng-template>
        </ngx-datatable-column>

        <ngx-datatable-column name="DataSource Type" prop="dataSourceType" [width]="10">
          <ng-template let-expanded="dataSourceType" let-row="row" ngx-datatable-cell-template>
            {{row.dataSourceType}}
          </ng-template>
        </ngx-datatable-column>
        <ngx-datatable-column name="Write Mode" prop="append" [width]="10">
          <ng-template let-expanded="append" let-row="row" ngx-datatable-cell-template>
            {{row.append && 'Append' || 'Override'}}
          </ng-template>
        </ngx-datatable-column>
        <!--Footer -->
        <ngx-datatable-footer>
          <ng-template ngx-datatable-footer-template let-rowCount="rowCount" let-pageSize="pageSize"
            let-selectedCount="selectedCount" let-isVisible="isVisible">
            <div *ngIf="(rowCount / pageSize) > 1" class="pager-bar-inner">
              <strong>Total</strong>: {{ rowCount }}
              <datatable-pager [pagerLeftArrowIcon]="'datatable-icon-left'"
                [pagerRightArrowIcon]="'datatable-icon-right'" [pagerPreviousIcon]="'datatable-icon-prev'"
                [pagerNextIcon]="'datatable-icon-skip'" [page]="dashboardState.pagination.page" [size]="pageSize"
                [count]="rowCount" (change)="table.onFooterPage($event)">
              </datatable-pager>
            </div>
          </ng-template>
        </ngx-datatable-footer>

      </ngx-datatable>
    </div>
  </div>
</div>
